<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 85%;overflow-y: hidden">

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" v-bind="layout" :model="model" :rules="validatorRules">
        <a-form-model-item label="文章" required prop="siteFeatureDocId">
          <a-select v-model="model.siteFeatureDocId" class="my-select"
                    filterable
                    clearable
                    allowClear
                    default-first-option
                    :disabled="true"
                    placeholder="请选择文章"
          >
            <a-select-option
              v-for="item in data"
              :key="item.id"
              :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="变量" required prop="componentId">
          <a-select v-model="model.componentId" class="my-select"
                    filterable
                    clearable
                    allowClear
                    default-first-option
                    placeholder="请选择变量"
          >
            <a-select-option
              v-for="item in data2"
              :key="item.id"
              :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="参数值" required prop="componentValue">
          <a-input v-model="model.componentValue" placeholder="请输入路径参数"/>
        </a-form-model-item>
        <a-form-model-item prop="position" required label="位置">
          <a-input-number   :min="0" placeholder="请输入参数位置" v-model="model.position" @change="handleNumberChange" style="width: 200px"/>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
  import {addCrawlFeatureDoc, editCrawlFeatureDoc, duplicateCheck} from '@/api/api'
  import {getAction} from '@/api/manage'

  export default {
    name: "CrawlFeatureDocModal",
    data() {
      return {
        title: "操作",
        visible: false,
        data: [],
        data2: [],
        roleDisabled: false,
        model: {},
        layout: {
          labelCol: {span: 3},
          wrapperCol: {span: 14},
        },
        url: {
          list: "/sys/CrawlSiteFeatureDocCont/list",
          list2: "/sys/CrawlComponent/list",
        },
        confirmLoading: false,
        validatorRules: {
          siteFeatureDocId: [
            {required: true, message: '请选择文章!'},
          ],
          componentId: [
            {required: true, message: '请选择变量!'},
          ],
          componentValue: [
            {required: true, message: '请输入参数值!'},
          ],
          position: [
            {required: true, message: '位置不能为空!'},
          ]
        },
      }
    },

    created() {
      console.log("=======model========" + JSON.stringify(this.model));
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.loadData();
      this.loadData2();
    },
    methods: {
      handleNumberChange(value) {
        if (value < 0) {
          this.model.position = 0; // 如果输入值小于 0，则重置为 0
        }
      },

      add(dictId) {
        this.modelDefault.siteFeatureDocId=dictId
        this.edit(this.modelDefault);
      },
      edit(record) {
        this.model = Object.assign({}, record);
        this.visible = true;
        //编辑页面禁止修改角色编码
        if (this.model.id) {
          this.roleDisabled = true;
        } else {
          this.roleDisabled = false;
        }
      },
      close() {
        this.$refs.form.clearValidate();
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let obj;
            if (!this.model.id) {
              console.log("=====this.model========" + this.model)
              obj = addCrawlFeatureDoc(this.model);
            } else {
              obj = editCrawlFeatureDoc(this.model);
            }
            obj.then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit('ok');
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          } else {
            return false;
          }
        })
      },
      loadData() {
        let params = {}
        getAction(this.url.list, params).then((res) => {
          console.log("========res========" + JSON.stringify(res))
          if (res.success) {
            this.data = res.result.records
          }
        })
      },
      loadData2() {
        let params = {}
        getAction(this.url.list2, params).then((res) => {
          console.log("========res2========" + JSON.stringify(res))
          if (res.success) {
            this.data2 = res.result.records
          }
        })
      },
      handleCancel() {
        this.close()
      },

    }
  }
</script>

<style scoped>

</style>